<template>
  <view class="nav" :style="navStyle">
	  
    <view class="container">
      <!-- 图标 -->
      <view class="back-icon" @click="back">
        <image :src="ic_back" />
      </view>
      
      <!-- 标题 -->
      <view class="nav-title" v-if="titleText">{{ titleText }}</view>
    </view>
    
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  
  import ic_back from '@/static/resource/navbar/ic_back.png'
  
  // 自定义属性
  const props = defineProps({
    // 背景颜色
    background: {
      type: String,
      default: '#fff'
    },
    // 字体颜色
    color: {
      type: String,
    },
    // 字体大小
    fontSize: {
      type: String,
      default: '32'
    },
    // 标题文本
    titleText: {
      type: String,
    },
  })
  

 // 获取小程序中胶囊的信息
 const { height, top, width, left } = uni.getMenuButtonBoundingClientRect()
 
 // 获取系统信息，提取状态栏高度和屏幕宽度
 const { statusBarHeight, screenWidth } = uni.getSystemInfoSync() // 调用获取系统信息的API
 
 // 导航栏样式
 const navStyle = {
   height: (top + height - statusBarHeight)+ 'px', // 导航栏的高度等于从离状态栏到胶囊底端的高度
   background: props.background, // 导航栏背景
   top: statusBarHeight + 'px', // 留出状态栏的空间
   color: props.color, // 配置字体颜色
   fontSize: props.fontSize + 'rpx' // 配置字体大小
 }
 
  
// 页面栈的数量，第一个为首页
 const pageNum = ref(getCurrentPages().length)  
 
 // 页面跳转
 function back() {
	// 判断页面栈数量
	if(pageNum.value > 1) {
	  uni.navigateBack() //返回上一页
	}
 }
 
 
</script>

<style lang="less">
    .nav {
      position: fixed;
      width: 100%;
      z-index: 2;
			box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
      
      .container {
        position: relative;
        height: 100%;
        
        .back-icon {
          height: 100%;
          display: flex;
          align-items: center;
          
          image {
            width: 64rpx;
            height: 64rpx;
            margin-left: 20rpx;
          }
        }
        
        .nav-title {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
</style>